<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="height: 30px;">
                <el-breadcrumb-item>HR系统</el-breadcrumb-item>
                <el-breadcrumb-item>属性设置</el-breadcrumb-item>
                <el-breadcrumb-item>部门属性</el-breadcrumb-item>
                <el-breadcrumb-item>部门类型1</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 部门类型搜索模块 -->
        <div>
            <el-form label-width="100px" style="flex: 1;">
                <div style="display: flex;">
                    <el-row>
                        <el-col style="width: 100px;">
                            <el-form-item label="类型编码:"></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入类型编码：" v-model="deptTypeInfo.typeCode"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form-item label="类型名称："></el-form-item>
                        </el-col>
                        <el-col style="width: 200px;">
                            <el-input placeholder="请输入类型名称：" v-model="deptTypeInfo.typeName"></el-input>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-form>
                                <el-form-item>
                                    <el-button type="primary" @click="getDeptTypeData()" size="mini"
                                        style="height: 40px;"><i class="el-icon-search" />搜索</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                        <el-col style="width: 100px;">
                            <el-button type="danger" @click="reset()" size="mini" style="height: 40px;">重置 <i
                                    class="el-icon-refresh-left" /></el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div>
        <!-- 新增部门类型等操作 -->
        <div class="button-container">
            <el-button type="primary" plain @click="addDialogVisible = true" icon="el-icon-plus"
                style="height: fit-content;">新增</el-button><!--当添加部门类型时，弹框出现 -->
            <el-button type="primary" plain icon="el-icon-delete" style="height: fit-content;"
                @click="batchDeleteDeptType()">批量删除</el-button>
            <el-button type="primary" plain class="iconfont icon-hrjiesuo" style="height: fit-content;"
                @click="batchShengXiaoDeptType()">生效</el-button>
            <el-button type="primary" plain class="iconfont icon-hrsuoding" style="height: fit-content;"
                @click="batchShiXiaoDeptType()">失效</el-button>
        </div>

        <!-- 查询出来的结果区域 -->
        <div class="common-table">
            <el-table ref="deptTypeTable" :data="deptTypeList" height="350px" border stripe :header-cell-style="{
                                background: '#eef1f6', color: '#606266',
                                textAlign: 'center', fontWeight: 'bold', borderWidth: '3px'
                            }" @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="类型代码" align="center" prop="typeCode"></el-table-column>
                <el-table-column label="类型名称" align="center" prop="typeName"></el-table-column>
                <el-table-column label="备注" align="center" prop="remark"></el-table-column>
                <el-table-column label="操作" width="420px" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <el-col style="width: 80px;">
                                <!-- 修改 -->
                                <el-button type="primary" icon="el-icon-edit" size="mini"
                                    @click="EditDeptType(scope.row.TypeCod)" style="width: 75px;">编辑</el-button>
                            </el-col>
                            <el-col style="width: 80px;">
                                <!-- 删除 -->
                                <el-button type="danger" icon="el-icon-delete" size="mini"
                                    @click="DeleteDeptType(scope.row.typeCode)" style="width: 75px;">删除</el-button>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页组件 size-change 每页最大变化 current-change 当前最大变化 layout功能组件-->
        <div class="pager">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="deptTypeInfo.pageNumber" :page-sizes="[5, 10, 20, 50]" :page-size="deptTypeInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 添加部门类型区域 -->
        <el-dialog title="添加部门类型" :visible.sync="addDialogVisible" width="50%">
            <el-form :model="addDeptTypeForm" :rules="addDeptTypeFormRules" ref="addDeptTypeFormRef">
                <el-row>
                    <el-col style="width: 120px;">
                        <el-form-item label="部门类型：" prop="typeCode"
                            style="width: 120px;display:inline-block;"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addDeptTypeForm.typeCode" placeholder="请输入部门类型："
                            style="width: 150px;"></el-input>
                    </el-col>
                    <el-col style="width: 120px;">
                        <el-form-item label="类型名称：" style="display:inline-block" prop="typeName"></el-form-item>
                    </el-col>
                    <el-col style="width: 150px;">
                        <el-input v-model="addDeptTypeForm.typeName" placeholder="请输入部门名称："
                            style="width: 150px;"></el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col style="width: 110px;height: 40px;">
                        <el-form-item label="备注：:" style="display:inline-block;" prop="remark"></el-form-item>
                    </el-col>
                    <el-col style="width: 200px;height: 40px;margin-left: 10px;">
                        <el-input type="textarea" placeholder="请输入" v-model.trim="addDeptTypeForm.remark"
                            :autosize="{ minRows: 2, maxRows: 4 }" maxlength="100" show-word-limit />
                    </el-col>
                </el-row>
            </el-form>
            <div class="row-container">
                <el-row>
                    <el-col style="width: 100px;">
                        <!-- 取消即关闭窗口 -->
                        <el-button @click="addClose()">取消</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="primary" @click="addDeptType()">确定</el-button>
                    </el-col>
                    <el-col style="width: 100px;">
                        <el-button type="info" @click="addDeptTypeClear()">重置</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    created() {
        this.getDeptTypeData();
    },
    data() {
        return {
            // 部门类型查询的参数信息
            deptTypeInfo: {
                typeCode: "",//类型code
                typeName: "",//类型名称
                pageNumber: 1,//默认显示的页数
                pageSize: 5,//每页默认显示的数据
            },
            deptTypeList: [],
            total: 0,//总记录数
            //定义一个类型数据数组(即复选框选中的数据)
            deptTypetypeCodes: [],
            addDialogVisible: false,//对话框默认关闭状态
            // 添加部门类型的数据
            addDeptTypeForm: {
                typeCode: '',//类型code
                typeName: '',//类型名称
            },

            //添加部门类型字段验证
            addDeptTypeFormRules: {
                typeCode: [
                    { required: true, message: '请输入字段中文1', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
                typeName: [
                    { required: true, message: '请输入字段中文2', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        //查询类型的接口
        async getDeptTypeData() {
            const { data: res } = await this.$http.get("deptType", { params: this.deptTypeInfo });
            this.deptTypeList = res.data.data;
            this.total = res.data.deptTypeCounts;
            if (res.code == 117) {
                return this.$message.error(res.message);
            }
        },
        handleSelectionChange() {
            //打印出来的数据 就是勾选获取的勾选那一行的数据
            //console.log(this.$refs.deptTypeTable.selection);
            /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的typeCodes这个数组了
            this.deptTypetypeCodes = this.$refs.deptTypeTable.selection.map((item) => item.typeCode);
            // deptTypetypeCodes 这个数组 就是由勾选每一行的id组成的数组了 deptType
            //console.log(this.deptTypetypeCodes, 777);
        },
        //监听 page size 改变的事件
        handleSizeChange(newSize) {
            this.deptTypeInfo.pageSize = newSize;
            this.getDeptTypeData();
        },
        //监听 页码值 改变的事件
        handleCurrentChange(newPage) {
            this.deptTypeInfo.pageNum = newPage;
            this.getDeptTypeData();
        },
        reset() {
            this.deptTypeInfo.typeCode = "",
            this.deptTypeInfo.typeName = ""
        },
        //新增DeptType
        addDeptType() {
            this.$refs.addDeptTypeFormRef.validate(async valid => {
                if (!valid) return;
                const { data: res } = await this.$http.post("addDeptType", this.addDeptTypeForm);
                if (res.message != '成功') {
                    return this.$message.error("新增失败！！！");
                }
                this.$message.success("新增成功！！！");
                this.addDialogVisible = false;
                this.getDeptTypeData();
            });
        },
        //addDeptTypeClear()方法，当鼠标放在输入框中，清空输入框内容,通过@blur去触发---新增部门信息重置
        addDeptTypeClear() {
            this.addDeptTypeForm.typeCode = '';
            this.addDeptTypeForm.typeName = '';
        },
        addClose() {
            //清空表单方法
            this.title = '新增窗体'
            this.addDialogVisible = false;
            this.addDeptTypeForm = {
                typeCode: "",//类型code
                typeName: "",//类型名称
            };
        },
    }
}
</script>

<style lang="less" scoped>
.content-search {
    background: #ffffff;
    height: 10px;
}
</style>